<template>
  <div>
    <p>{{ msg | upper }}</p>
    <p>{{ time | formatTime }}</p>
    <!-- 过滤器可以传参 -->
    <p>{{ msg | upper1(2) }}</p>
    <!-- 在属性上使用 -->
    <p :id="100 | toFixFn">过滤器在属性上使用</p>
    <!-- 使用全局过滤器 -->
    <p>{{ money | formatMoney }}</p>
    <p>{{ formatMoneyFn(money) }}</p>
  </div>
</template>

<script>
// 过滤器语法:
// 数据|过滤器名称
// 作用: 就是将后端返回的数据合适如果不能直接展示给用户的话, 需要将数据处理成可以展示的数据
// 必须有返回值,返回值就是你处理完的要给用户展示的数据格式
// 过滤器的分类: 全局过滤器和局部过滤器

export default {
  data() {
    return {
      msg: "abcdefg",
      time: new Date().getTime(),
      money: 999,
    };
  },
  created() {
    console.log(this.time);
  },
  methods: {
    formatMoneyFn(val) {
      return `${val.toFixed(2)}块钱`;
    },
  },
  filters: {
    // 语法: 定义所有的过滤器
    upper(val) {
      console.log("val", val); // 就是你要处理的数据
      console.log(
        val.substring(0, 3) + val[3].toUpperCase() + val.substring(4)
      );
      return val.substring(0, 3) + val[3].toUpperCase() + val.substring(4);
    },
    formatTime(val) {
      const y = new Date(val).getFullYear();
      const m = new Date(val).getMonth() + 1;
      const d = new Date(val).getDate();
      return `${y}/${m}/${d}`;
    },
    upper1(val, n) {
      return val.substring(0, n) + val[n].toUpperCase() + val.substring(n + 1);
    },
    toFixFn(val) {
      console.log(val.toFixed(2));
      return val.toFixed(2);
    },
  },
};
</script>
<style scoped>
</style>